<template>
    <div class="user-management-form">
        <el-card>
            <template #header>
                <span>{{ component.formStatus }}用户</span>
            </template>
            <el-form ref="formRef" :model="form" class="demo-ruleForm" :rules="formRules">
                <el-form-item prop="username">
                    <el-input :placeholder="component.formPlaceholder.username" v-model.trim="form.username" type="text"
                        autocomplete="off" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :placeholder="component.formPlaceholder.password" show-password v-model.trim="form.password"
                        type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="email">
                    <el-input :placeholder="component.formPlaceholder.email" v-model.trim="form.email" type="email"
                        autocomplete="off" />
                </el-form-item>
                <el-form-item prop="camera">
                    <el-cascader v-model="form.camera" :options="userCameraOpts" @change="cameraHandleChange"
                        :placeholder="component.formPlaceholder.camera" :props="{ multiple: true, emitPath: false }" />
                </el-form-item>
                <el-form-item prop="role">
                    <el-cascader :placeholder="component.formPlaceholder.role" v-model="form.role" :options="userRoleOpts"
                        @change="roleHandleChange" />
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="form.createdAt" type="datetime"
                        :placeholder="component.formPlaceholder.createdAt" />
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="form.updatedAt" type="datetime"
                        :placeholder="component.formPlaceholder.updatedAt" />
                </el-form-item>
                <el-form-item>
                    <el-button :type="component.formControl.submit.type" @click="submitForm(formRef)">{{
                        component.formControl.submit.value }}</el-button>
                    <el-button :type="component.formControl.reset.type" @click="resetForm(formRef)">{{
                        component.formControl.reset.value }}</el-button>
                    <!-- <el-button type="primary" @click="addUser">添加用户</el-button> -->
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { FormInstance } from "element-plus/es/components/form"
import { computed, ref } from "vue"
import { useStore } from "vuex"
import { IUserManagementState } from "@/store/models/Admin/UserManagement/types"

const store = useStore()

const addUser = () => {
    const user = {
        username: 'test' + Math.random(),
        password: 'test',
        email: '1231@qq.com',
        camera: ["644beccaf628f8e53b8c7719", "644bf06b6507d430db0d950e"],
        role: "user",
        createdAt: "2021-08-10T08:00:00.000Z",
        updatedAt: "2021-08-10T08:00:00.000Z"
    }
    store.commit('admin/userManagement/_addUser', user)
}
const component = computed(() => store.state.admin.userManagement.userFormComponent as IUserManagementState['userFormComponent']);
const form = computed(() => store.state.admin.userManagement.userForm);
const formRules = computed(() => store.state.admin.userManagement.userFormRules as IUserManagementState['userFormRules']);
const formRef = ref<FormInstance>()

const submitForm = (formEl: FormInstance | undefined) => {
    if(component.value.formStatus === '添加') {
        store.dispatch("admin/userManagement/addUser", form.value)
    } else {
        store.dispatch("admin/userManagement/modifyUser", form.value)
    }
}
const resetForm = (formEl: FormInstance | undefined) => {
    component.value.formStatus = '添加'
    formEl && formEl.resetFields();
}

const userRoleOpts = computed(() => store.state.admin.userManagement.userRoleOpts as IUserManagementState['userRoleOpts']);
const roleHandleChange = (value: string[]) => store.commit('admin/userManagement/_setState', { path: 'userForm.role', value: value[0] })

const userCameraOpts = computed(() => store.state.admin.userManagement.userCameraOpts as IUserManagementState['userCameraOpts']);
const cameraHandleChange = (value: string[]) => store.commit('admin/userManagement/_setState', { path: 'userForm.camera', value: value });
</script>
